<template>
  <section class="zy-home">
    <div class="img-box">
      <ZyLogo :showTitle="false" size="80"/>
    </div>
    <hr/>
    <section class="one">
      <header class="major">
        <h1>VUE3后台管理系统</h1>
        <h2 class="sub-title">技术栈:Vue 3 + js + Pinia  </h2>
      </header>
      <div class="zy-code">
        <code>$ npm i</code>
        <code>$ npm run dev</code>
        <code>$ npm run build</code>
      </div>

    </section>

  </section>
</template>

<script setup>
import ZyLogo from "../../components/common/ZyLogo.vue";

</script>

<style lang="scss" scoped>
.zy-home {
  padding-top: 2rem;
}
.img-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem auto 2rem;
}

.one {
  max-width: 1200px;
  margin: 2rem auto;

  .major {
    text-align: center;
    margin-bottom: 2rem;

    h1 {
      margin-bottom: 1rem;
    }

    p:nth-child(3) {
      margin-bottom: 1rem;
    }

    a {
      margin: .5rem;
    }
  }
}
</style>
